<template>
  <div class="Detail">
    <div class="detail_title">
      工资单详情
      <span class="backbtns" @click="goBack">返回</span>
    </div>
    <div class="basic_info_water">
      <div class="basicInfo_title">基础信息</div>
      <div class="basic_Info_item">
        <el-row>
          <el-col :span="8">
            <div class="item_list1"></div>
          </el-col>
          <el-col :span="8">
            <div class="item_list2">
              <div>部门:{{ payRollDetail.dptName }}</div>
              <div>月份:{{ payRollDetail.wagesMoon }}</div>
              <div>手工额外提成:{{ payRollDetail.hardAwardExtMoney }}</div>
              <div>手工提成:{{ payRollDetail.hardAwardMoney }}</div>
              <div>手工:{{ payRollDetail.hardMoney }}</div>
              <div>待客提成:{{ payRollDetail.hospitalityMoney }}</div>
              <div>总工资:{{ payRollDetail.totalMoney }}</div>
              <div>约客提成:{{ payRollDetail.visitorMoney }}</div>
              <div>加班工资:{{ payRollDetail.workMoney }}</div>
              <div>业绩提成(店长):{{ payRollDetail.poMoney }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item_list3">
              <div>用户名称:{{ payRollDetail.userName }}</div>
              <div>艺名:{{ payRollDetail.stageName }}</div>
              <div>其他奖金:{{ payRollDetail.otherMoneyAdd }}</div>
              <div>其他扣款:{{ payRollDetail.otherMoneySub }}</div>
              <div>业绩提成(技师):{{ payRollDetail.rechargeAwardMoney }}</div>
              <div>业绩(技师):{{ payRollDetail.rechargeMoney }}</div>
              <div>实际出勤:{{ payRollDetail.workDayReal }}</div>
              <div>应出勤:{{ payRollDetail.workDayWant }}</div>
              <div>奖金(店长):{{ payRollDetail.bonusMoney }}</div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="item_list3">
              <div>全勤:{{ payRollDetail.postName }}</div>
              <div>全勤:{{ payRollDetail.workAllMoney }}</div>
              <div>岗位津贴:{{ payRollDetail.postAllowanceMoney }}</div>
              <div>工龄工资:{{ payRollDetail.workYearMoney }}</div>
              <div>培训补助:{{ payRollDetail.trainSubsidyMoney }}</div>
              <div>培训提成:{{ payRollDetail.trainAwardMoney }}</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 工资单历史 -->
      <div class="order_list_table">
        <div class="order_title">工资单历史</div>
        <div class="order_table_list">
          <el-table :data="payRollHistory" stripe style="width: 100%">
            <el-table-column prop="workDayWant" label="应出勤">
            </el-table-column>
            <el-table-column prop="workDayReal" label="实际出勤">
            </el-table-column>
            <el-table-column prop="basicMoney" label="基本工资">
            </el-table-column>
            <el-table-column prop="basicWorkMoney" label="考勤工资">
            </el-table-column>

            <el-table-column prop="workHour" label="加班时长">
            </el-table-column>
            <el-table-column prop="workMoney" label="加班工资">
            </el-table-column>
            <el-table-column prop="hardMoney" label="手工"> </el-table-column>
            <el-table-column prop="hardAwardMoney" label="手工提成">
            </el-table-column>
            <el-table-column
              prop="hardAwardExtMoney"
              label="手工额外提成"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="rechargeMoney"
              label="业绩(技师)"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="rechargeAwardMoney"
              label="业绩提成(技师)"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="clockAddMoney" label="加钟提成">
            </el-table-column>
            <el-table-column prop="clockSpotMoney" label="点钟提成">
            </el-table-column>
            <el-table-column prop="hospitalityMoney" label="待客提成">
            </el-table-column>
            <el-table-column prop="visitorMoney" label="约客提成">
            </el-table-column>
            <el-table-column prop="otherMoneyAdd" label="其他奖金">
            </el-table-column>
            <el-table-column prop="otherMoneySub" label="其他扣款">
            </el-table-column>
            <el-table-column prop="poMoney" label="业绩提成(店长)" width="120">
            </el-table-column>
            <el-table-column prop="bonusMoney" label="奖金(店长)" width="100">
            </el-table-column>
            <el-table-column prop="totalMoney" label="总工资">
            </el-table-column>
            <el-table-column prop="updateName" label="修改人" width="120">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="150px">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
      
  <script>
import { getWagesInfo, getWagesHistoryPage } from "@/api/bpm/Payroll";
export default {
  name: "PayrollDetail",

  data() {
    return {
      payRollDetail: {},
      payRollHistory: [],
    };
  },

  created() {
    let wagesId = this.$route.query.wagesId;
    let dptId = this.$route.query.dptId;
    this.getList(wagesId, dptId);
    this.getHistoryList(wagesId, dptId);
  },

  mounted() {},

  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一个页面
    },

    getList(wagesId, dptId) {
      this.loading = true;
      getWagesInfo({ wagesId: wagesId, dptId: dptId })
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.payRollDetail = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 工资单历史记录
    getHistoryList(wagesId, dptId) {
      getWagesHistoryPage({ wagesId: wagesId, dptId: dptId })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.payRollHistory = data;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
      
<style lang="scss" scoped>
.Detail {
  background-color: #fff;
  margin: 24px;
  .detail_title {
    font-size: 20px;
    font-weight: bolder;
    padding: 24px;
    .backbtns {
      width: 120px;
      height: 30px;
      line-height: 30px;
      margin-left: 30px;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .basic_info_water {
    .basicInfo_title {
      padding-left: 24px;
      font-size: 15px;
      font-weight: bolder;
    }

    .basic_Info_item {
      padding-left: 24px;
      padding-top: 20px;
      .item_list1 {
        div {
          margin-bottom: 10px;
        }
      }
      .item_list2 {
        div {
          margin-bottom: 10px;
        }
      }
      .item_list3 {
        div {
          margin-bottom: 10px;
        }
      }
    }

    .pay_list_table {
      margin-top: 40px;
      padding-bottom: 30px;
      .pay_title {
        padding-left: 24px;
        font-size: 15px;
        font-weight: bolder;
        margin-top: 10px;
      }
      .pay_info {
        width: 601px;
        display: flex;
        margin: 10px 24px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        div {
          border-right: 1px solid #ccc;
          width: 100px;
          text-align: center;
        }
      }

      .pay_infos {
        width: 1200px;
        display: flex;
        margin: -11px 24px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        div {
          border-right: 1px solid #ccc;
          width: 100px;
          text-align: center;
        }
      }
      .pay_table_list {
        margin: 24px;
      }
    }
  }

  .order_list_table {
    .order_title {
      padding-left: 24px;
      font-size: 15px;
      font-weight: bolder;
      margin-top: 10px;
    }
    .order_table_list {
      margin: 15px 24px;
    }
  }
}

.serverPriceSumBox {
  flex-direction: column;
  .isFree {
    text-decoration: line-through;
  }

  .serverPriceSum2 {
    padding-left: 10px;
  }
}

.contentImg {
  img {
    width: 50px;
    height: 50px;
  }
}
</style>